<template>
  <!-- 添加或修改生产事件补录对话框 -->
  <el-dialog :title="title" :visible.sync="open" width="1200px" append-to-body :close-on-click-modal="false" :close-on-press-escape="false">
    <!--标签页-->
    <el-tabs type="border-card">
      <el-tab-pane label="基本信息">
        <el-form ref="form" :model="eventForm" label-width="150px">
          <el-form-item label="生产事件标题">
            <el-input v-model="eventForm.eventTitle" disabled />
          </el-form-item>
          <el-form-item label="生产事件描述" >
            <el-input v-model="eventForm.eventDesc" type="textarea" disabled />
          </el-form-item>
          <el-form-item label="生产事件单号">
            <el-input v-model="eventForm.eventReceiptCode" disabled />
          </el-form-item>
          <el-form-item label="生产事件发生时间">
            <el-date-picker clearable
                            v-model="eventForm.eventHappenDt"
                            type="datetime"
                            value-format="yyyy-MM-dd HH:mm:ss"
                            placeholder="请选择生产事件发生时间" disabled>
            </el-date-picker>
          </el-form-item>
          <el-form-item label="所属发版名称">
            <el-input v-model="null == eventForm.fbInfo ? '' : eventForm.fbInfo.fbName" disabled />
          </el-form-item>
          <el-form-item label="所属应用系统名称" prop="eventChannelId">
            <el-input v-model="null == eventForm.channelInfo ? '' : eventForm.channelInfo.channelName" disabled />
          </el-form-item>
          <el-form-item label="所属应急场景" prop="eventSceneId">
            <el-input v-model="null == eventForm.scene ? '' : eventForm.scene.sceneName" disabled />
          </el-form-item>
        </el-form>
      </el-tab-pane>
      <el-tab-pane label="处置时间线">
        <el-table :data="handleTimeLineList">
          <el-table-column label="步骤" align="center" prop="nodeSeq" >
            <template slot-scope="scope">
              {{Number(scope.row.nodeSeq) + 1}}
            </template>
          </el-table-column>
          <el-table-column label="节点事项" align="center" prop="nodeContent" />
          <el-table-column label="节点时限要求" align="center" prop="nodeRequireMaxTime" />
          <el-table-column label="处置联系人" align="center" prop="nodeContactUser.nickName" />
          <el-table-column label="处置联系电话" align="center" prop="nodeContactUser.phonenumber" />
          <el-table-column label="节点处置备注" align="center" prop="nodeRemark" />
          <el-table-column label="处置状态" align="center" prop="handleState" >
            <template slot-scope="scope">
              <dict-tag :options="dict.type.node_handle_state" :value="scope.row.handleState"/>
            </template>
          </el-table-column>
          <el-table-column label="处置时间" align="center" prop="handleDt" width="180">
            <template slot-scope="scope">
              <span>{{ parseTime(scope.row.handleDt, '{y}-{m}-{d} {h}:{i}:{s}') }}</span>
            </template>
          </el-table-column>
          <el-table-column label="处置过程详细描述/备注" align="center" prop="handleDesc" />
        </el-table>
      </el-tab-pane>
      <el-tab-pane label="详细信息">
        <el-form ref="detailForm" :model="detailForm" label-width="150px">
          <el-form-item label="生产事件原因" >
            <el-input v-model="detailForm.detailEventReason" type="textarea" disabled />
          </el-form-item>
          <el-form-item label="生产事件影响" >
            <el-input v-model="detailForm.detailEventEffective" type="textarea" disabled />
          </el-form-item>
          <el-form-item label="发现阶段" >
            <el-select v-model="detailForm.detailEventDiscoveryStage" disabled>
              <el-option
                v-for="dict in dict.type.event_discovery_stage"
                :key="dict.value"
                :label="dict.label"
                :value="dict.value"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="发现方式" >
            <el-select v-model="detailForm.detailEventDiscoveryWay" disabled>
              <el-option
                v-for="dict in dict.type.event_discovery_way"
                :key="dict.value"
                :label="dict.label"
                :value="dict.value"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="反馈行" >
            <el-input v-model="detailForm.detailEventFeedBank" disabled/>
          </el-form-item>
          <el-form-item label="处理措施" >
            <el-input v-model="detailForm.detailEventTreatment" type="textarea" disabled />
          </el-form-item>
          <el-form-item label="关联cq" >
            <el-input v-model="detailForm.detailLinkCq" disabled />
          </el-form-item>
          <el-form-item label="关联变更单号" >
            <el-input v-model="detailForm.detailLinkChangeCode" disabled />
          </el-form-item>
          <el-form-item label="事件解决状态" >
            <el-select v-model="detailForm.detailEventSloveState" disabled>
              <el-option
                v-for="dict in dict.type.product_event_slove_state"
                :key="dict.value"
                :label="dict.label"
                :value="dict.value"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="问题单号" >
            <el-input v-model="detailForm.detailPbmCode" disabled />
          </el-form-item>
          <el-form-item label="对应发版CQ涉及部门" >
            <el-input v-model="detailForm.detailAboutDept" disabled />
          </el-form-item>
          <el-form-item label="表象系统所属部门" >
            <el-input v-model="detailForm.detailSurfaceDept" disabled />
          </el-form-item>
          <el-form-item label="备注" >
            <el-input v-model="detailForm.detailRemark" type="textarea" disabled />
          </el-form-item>
        </el-form>
      </el-tab-pane>
    </el-tabs>

  </el-dialog>
</template>

<script>

import {searchEvent} from "@/api/yjcz/productEvent";


export default {
  name: "eventSearchDialog",
  dicts: ['event_discovery_stage', 'event_discovery_way', 'node_handle_state', 'product_event_slove_state'],
  data() {
    return {
      open: false,
      title: '查询生产事件',
      eventForm: {},
      detailForm: {},
      handleTimeLineList: []
    }
  },
  methods: {
    show (eventId) {
      this.open = true
      searchEvent(eventId).then(response => {
        if (response.code === 200) {
          let form = response.data
          this.eventForm = form
          let eventDetail = form.eventDetail
          if (null != eventDetail) {
            this.detailForm = eventDetail
          } else {
            this.detailForm = {}
          }
          let timeLineList = form.timeLineList
          if (null != timeLineList) {
            this.handleTimeLineList = timeLineList
          } else {
            this.handleTimeLineList = []
          }
        } else {
          this.$modal.msgError(response.msg);
        }
      })
    },
    cancel () {
      this.open = false
    }
  }
}
</script>

<style scoped>
>>> .el-input.is-disabled .el-input__inner {
  background-color: white;
}
>>> .el-textarea.is-disabled .el-textarea__inner {
  background-color: white;
}
</style>
